<script setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  },
  callback: {
	  type: Function,
	  default: () => {}
  }
})

</script>

<template>
  <view class="item-com-box" :style="data.style" @click="callback(data)">
    <view class="item-com-box-left">
		<view class="left-text-1" :style="data.leftText1Style">{{data.leftText1}}</view>
		<view v-if="data.leftText2" class="left-text-2">{{data.leftText2}}</view>
	</view>
	<view class="item-com-box-right">
		<view class="right-text-box">
			<view class="right-text-1" :style="data.rightText1Style">
				{{data.rightText1}}
			</view>
			<view class="right-text-2" :style="data.rightText2Style">
				{{data.rightText2}}
			</view>
		</view>
		<view class="iconfont icon-youjiantou" v-if="data.icon!='none'"></view>
	</view>
  </view>
</template>

<style lang="scss" scoped>
.item-com-box {
	@include flex(row,space-between,center);
	width: 100%;
	// height: 110rpx;
	padding: 30rpx;
	box-sizing: border-box;
	border-bottom: 1px solid #e6e6e6;
	background-color: #fff;
	
	.item-com-box-left{
		.left-text-1{
			font-size: 28rpx;
		}
		.left-text-2{
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #666;
		}
	}
	
	.item-com-box-right{
		@include flex(row,flex-start,center);
		.right-text-1{
			font-size: 28rpx;
			margin-right: 20rpx;
		}
		
		.icon-youjiantou{
			margin-top: 10rpx;
			color: #727272;
		}
	}
}
</style>
